<html>
    <head>
        <title>列表的进入/离开过渡</title>
    </head>
    <body>
        <script>
             // 一、列表的进入/离开过渡
                               /*
                                     现在让我们由一个简单的例子深入，进入和离开的过渡使用之前一样的CSS类名。
                                     

                                            <div id="list-demo" class="demo">
                                                <button v-on:click="add">Add</button>
                                                <button v-on:click="remove">Remove</button>
                                                <transition-group name="list" tag="p">
                                                    <span v-for="item in items" v-bind:key="item" class="list-item">
                                                        {{ item}}
                                                    </span>
                                                </transition-group>
                                            </div>
                               */

                               new Vue({
                                                el:'#list-demo',
                                                data:{
                                                    items:[1,2,3,4,5,6,7,8,9],
                                                    nextNum:10
                                                },
                                                methods: {
                                                    randomIndex:function(){
                                                        return Math.floor(Math.random()*this.items.length)
                                                    },
                                                    add:function(){
                                                        this.items.splice(this.randomIndex(),0,this.nextNum++)
                                                    },
                                                    remove:function(){
                                                        this.items.splice(this.randomIndex(),1)
                                                    }
                                                },
                                            });

                                /*
                                    .list-item{
                                        display:inline-block;
                                        margin-right:10px;
                                    }

                                    .list-enter-action .list-leave-active{
                                        transition:all 1s;
                                    }

                                    .list-enter, .list-leave-to{
                                        opacity:0;
                                        transform:translateY(30px);
                                    }
                                */
                                
                                /*
                                    这个例子有个问题，当添加和移除元素的时候，周围的元素会瞬间移动到他们的新布局的位置，而不是平滑的过渡。
                                    我们下面会解决这个问题。
                                */
        </script>
    </body>
</html>